<template>
  <div class="main">
    <el-divider>基本信息</el-divider>
    <div class="row">
      <div style="margin-left: 20px; font-size: 16px">
        <el-link type="primary" v-if="info.CS_FormID" @click="toForm(info.CS_FormID)" title="点击跳转新案登记页面">
          所属部门：{{ info.DPM_Name }}
        </el-link>
      </div>
      <div style="margin-left: 20px; font-size: 16px">
        <el-link type="primary" v-if="info.CS_FormID" @click="toForm(info.CS_FormID)" title="点击跳转新案登记页面">
          流程：{{ info.FLOW_Name }}
        </el-link>
        <el-link type="primary" v-else @click="toOldForm(info.CS_ID)" title="点击跳转新案登记页面">
          流程：{{ info.CS_InsureTypeDetails }}[点击跳转新案登记页面]
        </el-link>
      </div>
      <div style="margin-left: 20px; font-size: 16px">
        <el-link type="primary" @click="toForm(info.CS_FormID)" title="点击跳转新案登记页面"></el-link>
      </div>
      <!-- <div>是否需要案件提醒：{{ info.CS_AutoWarning }}</div>
      <div>案件提醒时限：{{ info.CS_WarningDays }}天</div>
      <div>最新更进时间：{{ info.CS_FollowTime | formatTime }}</div> -->
      <el-form label-width="100px" label-position="left" style="margin: 20px 0px 0px 10px; width: 80%">
        <el-form-item label="流水号">
          <el-input v-model="info.CS_No"></el-input>
        </el-form-item>
        <el-form-item label="报案号">
          <el-input v-model="info.CS_InsureCmpCaseNo" title="请输入委托机构报案号"></el-input>
        </el-form-item>
        <el-form-item label="案件编号">
          <el-input v-model="info.CS_AppraiserCmpCaseNo" title="请输入处理机构案件编号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="info.CS_Status" placeholder="请选择状态">
            <el-option v-for="item in stses" :key="item.EnumValue" :label="item.Description"
              :value="item.EnumValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结案日期" v-if="info.CS_Status == 100">
          <el-date-picker type="date" v-model="info.CS_EndCaseDate" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="info.CS_DisplayName"></el-input>
        </el-form-item>
        <el-form-item label="委托日期">
          <el-date-picker type="date" v-model="info.CS_DelegationDate"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="事故地区">
          <el-input v-model="info.CS_AccidentAreaDesc"></el-input>
        </el-form-item>
        <el-form-item label="事故时间">
          <el-date-picker type="date" v-model="info.CS_AccidentTime"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="事故原因">
          <el-input v-model="info.CS_AccidentReason"></el-input>
        </el-form-item>
        <el-form-item label="估损金额">
          <el-input v-model="info.CS_EstimateLossFee"></el-input>
        </el-form-item>
        <el-form-item label="定损金额">
          <el-input v-model="info.CS_LossFee"></el-input>
        </el-form-item>
        <el-form-item label="报损金额">
          <el-input v-model="info.CS_ReportLossFee"></el-input>
        </el-form-item>
        <el-form-item label="理算金额">
          <el-input v-model="info.CS_AdjustmentFee"></el-input>
        </el-form-item>
        <el-form-item label="允许添加日志">
          <el-checkbox v-model="info.CS_AllowLog"></el-checkbox>
        </el-form-item>
        <el-form-item label="允许报销">
          <el-checkbox v-model="info.CS_AllowExpense"></el-checkbox>
        </el-form-item>
        <el-form-item label="差旅报销类型">
          <el-select v-model="info.CS_ExpenseTypeID" placeholder="请选择差旅报销类型">
            <el-option v-for="item in types" :key="item.EXTY_EnumValue" :label="item.EXTY_EnumTxt"
              :value="item.EXTY_EnumValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件概述">
          <el-input v-model="info.CS_Remark" type="textarea" rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div v-for="(field, index) in info.CustomFields" :key="index">
        <form-field :formField="field" :isBusiness="false"></form-field>
      </div>

      <el-button @click="save" round type="warning" style="
          position: fixed;
          right: 50px;
          bottom: 120px;
          width: 120px;
          height: 60px;
          font-size: 16px;
        ">
        保存
      </el-button>
    </div>
  </div>
</template>
<script>
import {
  getCase,
  getExpenseTypes,
  saveCase,
  getCaseStatuses,
} from '@/api/core/case'
import formField from '@/views/web/flowManage/components/formField.vue'
export default {
  components: { formField },
  props: ['caseId'],
  data: function () {
    return {
      info: {},
      types: [],
      stses: [],
    }
  },
  methods: {
    getCaseStatuses() {
      getCaseStatuses().then(({ data }) => {
        this.stses = data
      })
    },
    getExpenseTypes() {
      getExpenseTypes().then(({ data }) => {
        this.types = data
      })
    },
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toOldForm(formId) {
      window.open('http://111.230.247.78:8443/#/myWorkflow/handleNewCase/' + formId, '_blank')
    },
    getCase() {
      getCase(this.caseId).then(({ data }) => {
        this.info = data
      })
    },
    save() {
      saveCase(this.info).then(({ data }) => {
        this.$message('保存成功')
        this.getCase()
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCase()
    this.getExpenseTypes()
    this.getCaseStatuses()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 100%;
  overflow: auto;
}

.row {
  height: 100%;
  width: 600px;
}

.col {
  height: 100%;
}

.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}

.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
